<template>
<el-form-item label="选择镇街">
    <el-select :key="townDataCode" v-model="townDataCode" @focus="toTown" :disabled="disabled" filterable placeholder="请选择">
        <el-option v-for="item in town" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
    </el-select>
</el-form-item>
</template>

<script>
export default {
    props: {
        townCode: {
            type: String,
            default: function () {
                return '440605'
            }
        }
    },
    data() {
        return {
            town: [{
                label: '全部',
                value: '440605'
            }],
            disabled: false
        }
    },
    computed: {
        townDataCode: {
            get() {
                this.$emit('on-change', this.townCode)
                this.toTown()
                return this.townCode
            },
            set(val) {
                this.townCode = val
            }
        }
    },
    methods: {
        toTown() {
            if (this.town.length > 1) {
                return false
            }
            this.$common.municipality('440605')
                .then((res) => {
                    if (res.errorCode === '00000') {
                        res.data.forEach((item) => {
                            this.town.push({
                                label: item.administrativeName,
                                value: item.administrativeCode
                            })
                        })
                    }
                })
        },
    },
    watch: {
        townCode: {
            handler(n,o) {
                this.townDataCode = n
            },
            deep: true
        }
    },
}
</script>
